<template>
  <div class="course-container mx-center">
    <!-- 搜索模块 -->
    <div class="course-search">
      <div class="search-tag">
        用户管理
      </div>
      <div class="search-wrapper">
        <input v-model="query.username" @keyup.enter="fetchData" type="text" placeholder="输入用户名搜索">
        <i @click="fetchData" class="iconfont">&#xe63c;</i>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      size="mini"
      highlight-current-row
    >
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工作" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.job }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.identity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="封面" width="130" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="100px" height="60px">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="warning" @click="handleDel(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="fetchData"/>

    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%" :append-to-body='true' :close-on-click-modal="false" :show-close="false"
               :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户身份">
          <el-select v-model="form.identity" style="width: 100%" placeholder="请选择">
            <el-option
              v-for="item in identityOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAction">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getUserList, getUserDetail, addUser, delUser, updateUser} from '@/api/user.js'
  import Pagination from 'components/pagination/pagination.vue'
  import {ERR_OK} from "@/api/config";

  export default {
    components: {Pagination},
    data () {
      return {
        list: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        },
        total: 0,
        query: {},
        form: {},
        identityOptions: [
          {
            value: '普通用户'
          },
          {
            value: 'vip'
          }
        ],
        dialogVisible: false
      }
    },
    created () {
      this.fetchData()
    },
    computed: {
      // vuex
      ...mapGetters(['userInfo'])
    },
    methods: {
      handleClose() {
        this.form = {}
        this.dialogVisible = false
      },
      fetchData () {
        this.listLoading = true
        getUserList(this.query, this.listQuery).then(response => {
          this.list = response.data.rows
          this.listLoading = false
          this.total = response.data.total
        })
      },
      handleUpdate (row) {
        this.form = row
        this.dialogVisible = true
      },
      submitAction() {
        updateUser(this.form).then(res => {
          this.$message.success('修改成功')
        })
        this.dialogVisible = false
        this.handleClose()
      },
      handleDel (id) {
        this.$confirm('你确定永久删除此条记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          delUser(id).then(res => {
            this.$message.success('删除成功')
            this.fetchData();
          });
        }).catch(() => {
          this.$message.info('已取消删除')
        });
      },
    }
  }
</script>
<style lang="css">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .course-container
    padding-top: 20px;
    .course-search
      padding: 12px 0;
      height: 60;
      .search-tag
        padding: 18px;
        font-size: 22px;
        display: inline-block;
        & > img:nth-child(2)
          margin-left: 16px;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  .search-wrapper
    position: relative;
    float: right;
    width: 466px;
    height: 60px;
    line-height: 60px;
    .iconfont
      position: absolute;
      right: 15px;
      top: 20px;
      font-size: 24px;
      color: $font-four-color;
      cursor: pointer;
      line-height: 1;
    input
      padding: 0 16px;
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      line-height: 36px;
      border-radius: 5px;
      outline: none;
      background: #f3f5f6;
      font-size: 14px;
      color: $font-first-color;
    .search-result
      z-index: 99;
      position: absolute;
      left: 0;
      top: 52px;
      right: 0;
      background-color: #fff;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-shadow: 0 4px 8px 0px $shadow;
      .result-item
        padding-left: 20px;
        line-height: 50px;
        color: $font-first-color;
        cursor: pointer;
        font-size: 14px;
        &:hover
          background: #f3f5f6;
</style>
